<template>
  <!-- 首页 功能栏组件 -->
  <div class="bar">
    <div
      class="bar-item"
      v-for="b in bars"
      :key="b.id"
      @click="barClickHandler(b)"
    >
      <div class="bar-icon">
        <img :src="b.icon" :alt="b.title" />
      </div>
      <span class="bar-title">{{ b.title }}</span>
    </div>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "MusicBar",
  data() {
    return {
      /* 功能tab栏 数据 */
      bars: [
        {
          id: nanoid(),
          title: "每日推荐",
          icon: "https://i.postimg.cc/pLWT16Y2/date.png",
        },
        {
          id: nanoid(),
          title: "我的收藏",
          icon: "https://i.postimg.cc/mkS4YTn7/collect.png",
        },
        {
          id: nanoid(),
          title: "我的电台",
          icon: "https://i.postimg.cc/MHz2KhGH/radio.png",
        },
        {
          id: nanoid(),
          title: "歌单推荐",
          icon: "https://i.postimg.cc/8CsLx5BP/music.png",
        },
      ],
    };
  },
  computed: {
    /* 获取后台音乐数据 */
    ...mapState("music", ["musicData"]),
    /* 获取用户收藏的音乐 */
    ...mapGetters("music", ["music_islike"]),
  },
  methods: {
    /* 弹出层操作的方法 */
    ...mapMutations("music", ["TOASTOPERA"]),

    /* 功能栏点击的业务处理 */
    barClickHandler({ title }) {
      if (title === "我的收藏") {
        this.TOASTOPERA({
          toastShow: true,
          toastData: this.music_islike,
          title,
        });
        return;
      }
      this.TOASTOPERA({
        toastShow: true,
        toastData: this.musicData,
        title,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bar {
  color: #f2f6fc;
  box-sizing: content-box !important;
  padding: 0.2rem;
  display: flex;
  justify-content: space-around;
  background: linear-gradient(to top, #243b55, #141e30);
  border-bottom: 0.05rem solid #f2f6fc33 !important;
  border-top: 0.05rem solid #f2f6fc33 !important;

  .bar-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    &:hover .bar-icon {
      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.12),
        0 0 6px rgba(255, 255, 255, 0.04);
    }

    &:hover .bar-title {
      color: #ffcff1;
    }
    .bar-icon {
      transition: all 0.3s;
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 50px;
      overflow: hidden;
      padding: 0.38rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to top, #2c5364, #203a43, #0f2027);
      img {
        height: 100%;
        width: 100%;
      }
    }
    .bar-title {
      font-size: 0.06rem;
      transition: all 0.3s;
      margin-top: 0.18rem;
    }
  }
}
@media screen and (max-width: 375px) {
  .bar {
    .bar-item {
      .bar-title {
        display: none;
      }
    }
  }
}
</style>